<template>
  <div class="profile-page">
    <nav-unit />
    <div class="center-content">
      <div class="profile">
        <avatar-upload :avatarUrl="userInfo.avatar" @updateAvatar="updateAvatar" />
        <div class="nickname">{{userInfo.nickname}}</div>
        <div class="vip" :style="vipStyle">{{userInfo.authority}}</div>
      </div>
      <div class="information">
        <h2>个人中心</h2>
        <p class="tips">介于个人中心没什么用，就不多整了</p>
        <div class="password-update">
          <h4>密码设置</h4>
          <div class="raw">
            <span>原密码：</span>
            <el-input v-model="oldPassword" type="password" :show-password="true" maxlength="20" @blur="valid.old = true"></el-input>
            <p class="warn" v-show="!valid.old">*原密码错误</p>
          </div>
          <div class="raw">
            <span>新密码：</span>
            <el-input v-model="newPassword" type="password" :show-password="true" maxlength="20" @blur="checkNew"></el-input>
            <p class="warn" v-show="!valid.new">*密码至少4位</p>
          </div>
          <div class="raw">
            <span>确认密码：</span>
            <el-input v-model="checkPassword" type="password" :show-password="true" maxlength="20" @blur="checkAgain"></el-input>
            <p class="warn" v-show="!valid.check">*两次输入不一致</p>
          </div>
          <el-button type="primary" round @click="updatePassword">修改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavUnit from '@/components/Navigation/NavUnit.vue'
import AvatarUpload from '@/components/Upload/AvatarUpload.vue'
import { onBeforeMount, reactive, ref } from '@vue/runtime-core'
import router from '@/router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  components: { 
    NavUnit,
    AvatarUpload
  },
  setup() {
    let token = sessionStorage.getItem('token')
    let userInfo = ref({})
    let vipStyle = ref('')
    let oldPassword = ref('')
    let newPassword = ref('')
    let checkPassword = ref('')
    let valid = reactive({
      old: true,
      new: true,
      check: true
    })

    const updateAvatar = (url) => {
      userInfo.value.avatar = url
      location.reload()//刷新页面
    }
    const checkNew = () => {
      valid.new = newPassword.value.length >= 4
    }
    const checkAgain = () => {
      valid.check = newPassword.value == checkPassword.value
    }
    const updatePassword = () => {
      axios.post('http://localhost/api/updatePassword', {
        oldPassword,
        newPassword
      }, {
        headers: {
          Authorization: 'Bearer '+token
        }
      }).then(res => {
        if(res.data.allowed) {
          ElMessage.success('修改成功！')
          sessionStorage.removeItem('token')
          router.replace('/login')
        } else {
          valid.old = false
        }
      }).catch(err => {
        ElMessage.error('修改失败！')
        console.log('未知错误！')
        console.log(err)
      })
    }

    onBeforeMount(() => {
      if(token) {
        axios.get('http://localhost/api/getUserInfo', {
          headers: {
            Authorization: 'Bearer '+token
          }
        }).then(res => {
          userInfo.value = res.data
          userInfo.value.avatar = userInfo.value.avatar ? userInfo.value.avatar : require('@/assets/Avatar/chino.jpg')
          if(userInfo.value.authority == 'root') {
            userInfo.value.authority = '阿瓦隆･勒･菲'
            vipStyle.value = 'background-color: rgb(64,48,119)'
          } else {
            userInfo.value.authority = '无名妖精'
            vipStyle.value = 'background-color: gray'
          }
        }).catch(err => {
          console.log('未知错误！')
          console.log(err)
          router.replace('/home')
        })
      } else {
        router.replace('/login')
      } 
    })

    return {
      userInfo,
      vipStyle,
      oldPassword,
      newPassword,
      checkPassword,
      valid,
      updateAvatar,
      updatePassword,
      checkNew,
      checkAgain
    }
  }
}
</script>

<style scoped>
  .center-content {
    display: flex;
  }
  .profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    padding: 20px 0;
    cursor: default;
  }
  .nickname {
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #48DBFB;
  }
  .vip {
    padding: 2px 5px;
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
  }
  .information {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500px;
    margin: 0 25px;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
  }
  .tips {
    font-size: 12px;
    margin: 10px 0;
  }
  span {
    display: inline-block;
    width: 80px;
    text-align: right;
  }
  .raw {
    position: relative;
    margin: 10px 0;
  }
  .el-input {
    width: 200px;
  }
  .warn {
    position: absolute;
    top: 50%;
    left: 102%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 14px;
    color: red;
  }
  .el-button {
    margin: 0 auto;
  }
</style>